<template>
  <div class="layout">
    <el-container class="full">
      <el-aside width="220px" class="aside">
        <div class="logo">TodayJob User</div>
        <el-menu router :default-active="$route.path">
          <el-menu-item index="/u/home"><i class="el-icon-s-home" /> 首页</el-menu-item>
          <el-menu-item index="/u/overview/leader"><i class="el-icon-data-analysis" /> 我的概览</el-menu-item>
          <el-menu-item index="/u/profile"><i class="el-icon-user" /> 个人信息</el-menu-item>
          <el-menu-item index="/u/teams"><i class="el-icon-user-solid" /> 团队</el-menu-item>
          <el-menu-item index="/u/schedules"><i class="el-icon-date" /> 日程</el-menu-item>
          <el-menu-item index="/u/kanban"><i class="el-icon-collection" /> 看板</el-menu-item>
          <el-menu-item index="/u/worklogs"><i class="el-icon-document" /> 日志</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div class="left">用户工作台</div>
          <div class="right">
            <span class="user" v-if="username">
              <el-link type="primary" :underline="false" @click="$router.push('/u/profile')">{{ username }}</el-link>
              <el-tag size="small" type="info" style="margin-left:6px" v-if="role">{{ role }}</el-tag>
            </span>
            <el-button link @click="switchPanel" style="margin-left:12px" v-if="role==='admin'">切换面板</el-button>
            <el-button link @click="logout" style="margin-left:12px">退出</el-button>
          </div>
        </el-header>
        <el-main>
          <Breadcrumb />
          <div :class="['content-container', { 'has-list': hasList }]">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import Breadcrumb from '@/components/Breadcrumb.vue'
const router = useRouter()
const route = useRoute()
const username = computed(() => localStorage.getItem('username') || '')
const role = computed(() => (sessionStorage.getItem('role') || 'user').toLowerCase())
const hasList = computed(() => !!route.meta?.hasList)
function logout() {
  localStorage.removeItem('userId')
  localStorage.removeItem('username')
  sessionStorage.removeItem('role')
  router.push('/login')
}
function switchPanel(){ router.push('/entry') }
</script>

<style scoped>
.full { height: 100vh; }
.aside { border-right: 1px solid #f0f0f0; }
.logo { height: 56px; display: flex; align-items: center; padding-left: 12px; font-weight: 600; }
.header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; }
.el-main { padding: 0; }
.user { color: #555; }
</style>
